<template>
	<div class="container-div" style="width: 100%">
		<div style="padding=20px">
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form layout="inline">
						<div style="margin-top: 10px">
							<a-form-item label="菜单名称">
								<a-input placeholder="请输入菜单名称" />
							</a-form-item>

							<a-form-item label="状态">
								<a-select
									prop="status"
									show-search
									placeholder="菜单状态"
									option-filter-prop="children"
									style="width: 200px"
									:filter-option="filterOption"
									@focus="handleFocus"
									@blur="handleBlur"
									@change="handleChange"
								>
									<a-select-option value="正常"> 正常 </a-select-option>
									<a-select-option value="停用"> 停用 </a-select-option>
								</a-select>
							</a-form-item>

							<span>
								<a-button style="margin-top: 4px" @click="handleSearch" type="primary">搜索</a-button>
								<a-button @click="handleReset" style="margin-left: 8px">重置</a-button>
							</span>
						</div>
					</a-form>
				</a-col>
				<!-- 按钮 -->
				<a-col :span="24">
					<div style="margin: 10px 0px; padding-left: 0px">
						<a-button type="primary" @click="showModal" ghost>新增</a-button>
						<a-modal v-model="visible" width="800px" title="添加菜单" @ok="handleOk">
							<CreateForm></CreateForm>
						</a-modal>
					</div>
				</a-col>
				<a-col :span="24">
					<a-table :columns="columns" :data-source="data" :row-selection="rowSelection">
						<a-col :gutter="8" :span="24">
							<a-form-item label="创建时间">
								<!--  @change="onChange" -->
								<a-range-picker @change="rangePicker" />
							</a-form-item>
						</a-col>
						<!-- 状态 -->
						<a slot="name" slot-scope="text">{{ text }}</a>
						<span slot="customTitle"><a-icon type="smile-o" /> Name</span>
						<span slot="status" slot-scope="status">
							<a-tag v-for="status in status" :key="status" :color="status === 'loser' ? 'volcano' : status.length > 5 ? 'blue' : 'blue'">
								<!-- {{ status.toUpperCase() }} -->
							</a-tag>
						</span>
						<!-- 插槽指向状态 -->
						<!-- <span slot="status" slot-scope="text">
							<a-status v-for="status in status" :key="status" :color="status === 'loser' ? 'volcano' : status.length > 5 ? 'geekblue' : 'green'">
								{{ status.toUpperCase() }}
							</a-status>
						</span> -->
						<span slot="action" slot-scope="text, record">
							<a @click="showModal"> 编辑</a>
							<a-divider type="vertical" />
							<a @click="showModal"> 新增</a>
							<a-divider type="vertical" />

							<a @click="handleDelete(record)">删除</a>
							<a-divider type="vertical"
						/></span>
					</a-table>
				</a-col>
			</a-row>
		</div>
	</div>
</template>

<script>
import CreateForm from './components/CreateForm.vue';
const columns = [
	{
		title: '菜单名称',
		width: '15%',
		dataIndex: 'menuName',
		key: 'menuName',
		align: 'center',
	},
	{
		title: '图标',
		width: '15%',
		dataIndex: 'cansee',
		key: 'cansee',
		align: 'center',
	},

	{
		title: '排序',
		dataIndex: 'orderNum',
		width: '10%',
		key: 'orderNum',
		align: 'center',
	},

	{
		title: '组件路径',
		width: '15%',
		dataIndex: 'perms',
		key: 'perms',
		align: 'center',
	},

	{
		title: '状态',
		key: 'status',
		dataIndex: 'status',
		scopedSlots: { customRender: 'status' },
	},
	{
		title: '创建时间',
		width: '15%',
		dataIndex: 'createTime',
		scopedSlots: { customRender: 'createTime' },
		align: 'center',
	},

	{
		title: '操作',
		width: '20%',
		align: 'center',
		dataIndex: 'action',
		scopedSlots: { customRender: 'action' },
	},
];

const data = [
	{
		key: 13,
		menuName: '系统管理',
		icon: 72,
		orderNum: 2,
		perms: 'London No. 1 Lake Park',
		component: '',
		status: ['正常'],
		createTime: '2022-02-2 18:12:34',
		action: '',
		children: [
			{
				key: 131,
				menuName: '用户管理',
				icon: 72,
				orderNum: 2,
				perms: 'London No. 1 Lake Park',
				component: '',
				status: ['正常'],
				createTime: '2022-02-2 18:12:34',
				action: '',
				children: [
					{
						key: 1311,
						menuName: '用户新增',
						icon: 72,
						orderNum: 2,
						perms: 'London No. 1 Lake Park',
						component: '',
						status: ['正常'],
						createTime: '2022-02-2 18:12:34',
						action: '',
					},
					{
						key: 1312,
						menuName: '用户修改',
						icon: 72,
						orderNum: 2,
						perms: 'London No. 1 Lake Park',
						component: '',
						status: ['正常'],
						createTime: '2022-02-2 18:12:34',
						action: '',
					},
				],
			},
			// {
			// 	key: 132,
			// 	menuName: '用户管理',
			// 	icon: 72,
			// 	orderNum: 2,
			// 	perms: 'London No. 1 Lake Park',
			// 	component: '',
			// 	status: ['正常'],
			// 	createTime: '2022-02-2 18:12:34',
			// 	action: '',
			// 	children: [
			// 		{
			// 			key: 1322,
			// 			menuName: '用户新增',
			// 			icon: 72,
			// 			orderNum: 2,
			// 			perms: 'London No. 1 Lake Park',
			// 			component: '',
			// 			status: ['正常'],
			// 			createTime: '2022-02-2 18:12:34',
			// 			action: '',
			// 		},
			// 		{
			// 			key: 13323,
			// 			menuName: '用户修改',
			// 			icon: 72,
			// 			orderNum: 2,
			// 			perms: 'London No. 1 Lake Park',
			// 			component: '',
			// 			status: ['正常'],
			// 			createTime: '2022-02-2 18:12:34',
			// 			action: '',
			// 		},
			// 	],
			// },
		],
	},
	{
		key: 2,
		menuName: '若依官网',
		icon: 72,
		orderNum: 2,
		perms: 'London No. 1 Lake Park',
		component: '',
		status: 1,
		createTime: '2022-02-2 18:12:34',
		action: '',
	},
];
const rowSelection = {
	onChange: (selectedRowKeys, selectedRows) => {
		console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
	},
	onSelect: (record, selected, selectedRows) => {
		console.log(record, selected, selectedRows);
	},
	onSelectAll: (selected, selectedRows, changeRows) => {
		console.log(selected, selectedRows, changeRows);
	},
};
export default {
	data() {
		return {
			components: {
				CreateForm,
			},
			visible: false,
			expandedKeys: ['0-0-0', '0-0-1'],
			data,
			columns,
			rowSelection,
			expandedRowKeys: [],
			// 筛选日期
			dateRange: [],
		};
	},

	computed: {},
	// 状态过滤
	filters: {
		statusFilter(type) {
			return statusMap[type].text;
		},
		statusTypeFilter(type) {
			return statusMap[type].status;
		},
	},
	methods: {
		// 状态选择
		handleChange(value) {
			console.log(`selected ${value}`);
		},
		handleBlur() {
			console.log('blur');
		},
		handleFocus() {
			console.log('focus');
		},
		filterOption(input, option) {
			return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
		},
		// 创建时间方法

		// 搜索按钮
		async handleSearch() {
			console.log('sousuo');
		},
		// 重置
		handleReset() {
			console.log('reset');
			this.dateRange = [];
		},
		// 新增按钮显示
		showModal() {
			this.visible = true;
		},
		// 新增编辑
		handleOk(e) {
			console.log(e);
			this.visible = false;
		},
		onContextMenuClick(treeKey, menuKey) {
			console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			console.log('shanchuyilie');
			const menuName = row.menuName;
			const that = this;
			this.$confirm({
				title: '警告',
				content: `真的要删除 菜单名称为${menuName}的数据项吗?`,
				okText: '删除',
				okType: 'danger',
				cancelText: '取消',
				// onOk() {
				// 	delConfig(configId).then((response) => {
				// 		if (response.code === 200) {
				// 			that.$message.success('删除成功!');
				// 			that.getList();
				// 		} else {
				// 			that.$message.error(response.msg);
				// 		}
				// 	});
				// },
			});
		},
		// 搜索框中的日期选择
		rangePicker(date, dateString) {
			this.dateRange = dateString;
		},
		/* 任务状态修改 */
		confirmHandleStatus() {
			console.log(23343);
			// 		row.status = row.status === '0' ? '1' : '0';
			// 		const text = row.status === '0' ? '启用' : '停用';
			// 		changeUserStatus(row.userId, row.status);
			// 			.then(() => {
			// 				this.$message.success(text + '成功', 3);
			// 			})
			// 			.catch(function () {
			// 				this.$message.error(text + '发生异常', 3);
			// 			});
		},
		cancelHandleStatus() {
			console.log('sudishfcd');
		},
	},
	components: { CreateForm },
};
</script>
<style scoped lang="scss">
.container-div {
	width: 100%;
}
.app-container {
	padding: 20px;
}
</style>
